<template>
    <div class="settings">
      <Card v-loading="loading" title="个人信息" :show-border="true">
        <el-form ref="form" :model="form" :rules="rules" style="width:500px;" label-position="left">
          <el-form-item label="头像">
            <Upload @success="uploadAvatar">
              <el-avatar :size="100" style="cursor: pointer">
                <img :src="form.avatar"/>
              </el-avatar>
            </Upload>
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <div class="flex">
              <div class="flex-item">
                <span v-text="form.phone"></span>
              </div>
              <div class="flex-item">
                <el-link style="margin-left:10px;" @click="visible=true">修改手机号</el-link>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="打赏收款码" prop="donate">
            <el-input v-model="form.donate" :readonly="true">
              <Upload slot="append" @success="uploadSuccess"></Upload>
            </el-input>
          </el-form-item>
          <el-form-item label="打赏描述" prop="donateDescription">
            <el-input v-model="form.donateDescription"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="loading" type="primary" @click="submit" size="mini">保存修改</el-button>
          </el-form-item>
        </el-form>
      </Card>
      <modify-phone :visible="visible" @close="visible = false" @refresh="getProfile()"></modify-phone>
    </div>
</template>

<script>
import api from "@/utils/api";
import utils from "@/utils/utils";

export default {
  name: "settings",
  layout: 'base',
  middleware: 'auth',
  data() {
    return {
      loading: false,
      uploading: false,
      visible: false,
      form: {
        name: '',
        email: '',
        phone: '',
        id: '',
        avatar: '',
        donate: '',
        donateDescription: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入昵称', triggr: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱', trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    this.getProfile();
  },
  methods: {
    uploadSuccess(url) {
      this.form.donate = url;
    },
    uploadAvatar(url) {
      this.form.avatar = url;
    },
    getProfile() {
      let self = this;
      self.loading = true;
      api.getUserProfile().then(info => {
        utils.merge(info, this.form);
      }).finally(() => self.loading = false);
    },
    submit() {
      let self = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          api.userProfileSave(this.form).then((data) => {

            if (data.code === 1) {
              self.$message({
                message: '保存成功',
                type: 'success'
              });

              //更新store的用户信息
              api.getUser().then(user => {
                self.$store.commit('setUser', user);
              });
            }
          }).finally(()=>self.loading = false);

        }
      });
    }
  }
}
</script>

<style scoped>

</style>
